import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


// 通过Echarts.init(DOM容器的DOM对象)方法初始化一个Echarts实例
let myChart1 = echarts.init(document.getElementById('mychart1'));


// 使用setOption方法生成图表
myChart1.setOption({   // 图表的配置项和数据

    title: {//配置图表的标题
        text: '{a|测试}{b|富文本}{c|怎么用}', //显示的主标题文本
        textStyle:{
            rich:{ //只要定义了rich属性,text的值就会根据{样式名|文本内容}进行解析
                a:{
                    color:'red',
                  
                },
                b:{
                    color:'blue',
                    backgroundColor:'yellow',
                },
                c:{
                    color:'green',
                
                },
            }
        }
    },
    grid:{ //可以把 grid 想象成一张“画布上的矩形框”,所有折线、柱状、散点等需要直角坐标系的图形都必须在这个框里完成绘制
        show:true
    },
    xAxis:{
        data:['one','two','three','four','five'] //x轴的显示内容
    },
    yAxis:{
        show:true,
    },
    series:[
     {     
        type:'bar',
        name:'柱状图',
        data:['10', '80', '40', '150', '100'],
        label:{
            show: true,//默认显示数值
            position: 'top',
            formatter: '{value|{c}}', //formatter中占位符a:系列名,b类目值,c数值,d百分比
            rich:{
                value: {
                    color: '#ee6666',
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
            }
        },
     }
    ]
});